<template>
  <view
    class="custom_head"
    :style="{
      width: '750rpx',
      position: 'fixed',
      top: 0,
      zIndex: 99999,

      height: navHeight + 'px',
      backgroundColor: bgColor,
    }"
  >
    <view
      class="box"
      :style="{
        height: navObj + 'px',
        paddingTop: navTop + 'px',
        paddingRight: navObjWid + 'px',
      }"
    >
      <!-- 返回上一页/当前页标题 -->
      <view
        v-if="isShowContent"
        class="container_"
        :style="{
          width: '750rpx',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          position: 'relative',

          height: navObj + 'px',
        }"
      >
        <!-- image版 -->
        <image
          v-if="isShowBack"
          @click="navigateBack"
          class="image"
          :style="{
            height: '70%',
            marginLeft: '20rpx',
            paddingRight: '140rpx',
          }"
          src="./image/back.png"
          mode="heightFix"
        />

        <!-- icon版 -->
        <!-- <view
          v-if="isShowBack"
          @click="navigateBack"
          class="image"
          :style="{
            height: '60%',
            marginLeft: '30rpx',
            transform: 'rotate(185deg)',
          }"
        >
          <i
            class="iconfont icon-jiantouyou"
            style="font-size: 36rpx"
            :style="{ color: iconColor }"
          ></i>
        </view> -->
        <view
          class="title"
          :style="{
            fontSize: '36rpx',
            position: 'absolute',
            left: '50%',
            transform: 'translateX(-50%)',
            color: titleColor,
          }"
          >{{ title }}</view
        >
      </view>

      <!-- 首页搜索框 -->
      <!-- <view @click="handleSearch" class="input" v-if="search">
        <view class="con" :style="{ height: navObj + 'px', borderColor: isroom ? '#eeeeee' : searchColor }">
          <icon class="icon" type="search" :color="isroom ? '#dddddd' : searchColor" size="34rpx" />
          <input disabled :style="{ color: searchColor }" placeholder-class="placeH"
            :placeholder-style="{ color: isroom ? '#cccccc' : '' }" placeholder="输入您想要查询的关键词" type="text" />
        </view>
      </view> -->
    </view>
  </view>
  <!-- 作用：用来占位高度，否则下面元素会向上到顶部(custom_head采用fixed定位) -->
  <!-- <view wx:if="{{ isPerch }}" style="background-color: aqua;width:100%;height: {{ navHeight }}px;"></view> -->
  <view
    v-if="isPerch"
    :style="{ width: '100%', height: navHeight + 'px' }"
  ></view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();

// 样式
const custom_head = ref();

//导航栏高度
const navHeight = ref(null);
//导航栏距顶部距离
const navTop = ref(null);
//胶囊的高度
const navObj = ref(null);
//胶囊宽度+距右距离
const navObjWid = ref(null);

onMounted(() => {
  let menuButtonObject = wx.getMenuButtonBoundingClientRect();

  wx.getSystemInfo({
    success: (res) => {
      //导航高度
      let statusBarHeight_ = res.statusBarHeight;
      let navTop_ = menuButtonObject.top;
      let navObjWid_ =
        res.windowWidth - menuButtonObject.right + menuButtonObject.width; // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
      let navHeight_ =
        statusBarHeight_ +
        menuButtonObject.height +
        (menuButtonObject.top - statusBarHeight_) * 2;

      navHeight.value = navHeight_; //导航栏总体高度
      navTop.value = navTop_; //胶囊距离顶部距离
      navObj.value = menuButtonObject.height; //胶囊高度
      navObjWid.value = navObjWid_; //胶囊宽度(包括右边距离)
      // console.log(navHeight,navTop_,menuButtonObject.height,navObjWid_)
    },
    fail(err) {
      console.log(err);
    },
  });

  userStore.updateNavHeight();
});

const props = defineProps({
  // 引入该组件的页面传过来的头部标题
  title: {
    type: String,
    default: "你没有设置标题哦~",
  },
  // 是否显示返回上一页
  isShowBack: {
    type: Boolean,
    default: true,
  },
  // 是否显示背景色
  isbgColor: {
    type: Boolean,
    default: true,
  },
  // 是否显示占位符
  isPerch: {
    type: Boolean,
    default: true,
  },
  // 容器背景色
  bgColor: {
    type: String,
    default: "#ffffff",
  },
  // 箭头颜色
  iconColor: {
    type: String,
    default: "#000",
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: "#000",
  },
  // 是否显示返回按钮和标题
  isShowContent: {
    type: Boolean,
    default: true,
  },
  // 是否展示首页搜索框
  search: {
    type: Boolean,
    default: false,
  },
  searchColor: {
    type: String,
    default: "#ffffff",
  },
  // 是否是在线课堂page
  isroom: {
    type: Boolean,
    default: false,
  },
  url: {
    type: String,
    default: "",
  },
});

// 点击返回按钮(返回上一级页面)
const navigateBack = () => {
  if (props.url == "appointmentSuccess") {
    uni.switchTab({
      url: "/pages/index/index",
    });
    return;
  }

  if (props.url == "appointment") {
    uni.switchTab({
      url: "/pages/index/index",
    });
    return;
  }

  // 为什么要try...catch...
  // 因为如果返回上一个页栈是tabbar就报错了，因为uni.navigateBack不支持跳转tabbar页面
  try {
    // 关闭当前页面，返回上一页面或多级页面
    // 可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层
    uni.navigateBack({
      delta: 1,
      animationType: "pop-out",
      animationDuration: 200,
      fail() {
        console.log("不能跳转");
        uni.reLaunch({
          url: "/pages/index/index",
        });
      },
    });
    console.log("No Tabbar");
  } catch (error) {
    uni.reLaunch({
      url: "/pages/index/index",
    });
  }
};

// 跳转到首页-搜索页面
const handleSearch = () => {
  uni.navigateTo({
    url: "/pages/search/search",
  });
};
</script>

<style lang="scss" scoped>
.custom_head {
  width: 750rpx;
  // background: #ffffff;
  position: fixed;
  top: 0;
  z-index: 999;

  .box {
    .container_ {
      width: 750rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .image {
        height: 60%;
        margin-left: 20rpx;
        // border:1px solid red;
        // padding-right: 120rpx;
        margin-left: 30rpx;
        // transform: rotate(185deg);

        .iconfont {
          font-size: 34rpx;
        }
      }

      .title {
        font-size: 36rpx;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    // .input {
    //   width: 100%;

    //   .con {
    //     display: flex;
    //     align-items: center;
    //     border: 1px solid #fff;
    //     width: 88%;
    //     border-radius: 40rpx;
    //     margin: 0 20rpx;
    //     margin-left: 40rpx;
    //     // border:1px solid red;

    //     .icon {
    //       margin-left: 20rpx;
    //       margin-right: 10rpx;
    //     }

    //     input {
    //       width: 100%;
    //       color: #fff;
    //       padding-right: 25rpx;
    //     }

    //     .placeH {
    //       color: var(--input);
    //       font-size: 28rpx;
    //     }
    //   }
    // }
  }
}
</style>
